<template>
  <div>
    <van-cell-group>
      <van-field v-model="username" clearable label="用户名" placeholder="请输入用户名" />
      <van-field v-model="idCardNo" clearable maxlength="6" label="身份证后六位" placeholder="请输入身份证后六位" />
      <van-field v-model="phone" clearable maxlength="4" label="手机号后四位" placeholder="请输入手机号后四位" />
    </van-cell-group>
    <!-- <van-collapse v-model="activeNames">
      <van-collapse-item
        :title="'姓名:'+item.username+'----身份证:'+item.idCardNo+'----手机:'+item.telphone"
        name="1"
        v-for="(item,index) in list"
        :key="index"
      >
        <van-field
          v-model="telphone[index]"
          clearable
          maxlength="6"
          type="tel"
          label="手机号"
          placeholder="请输入手机号"
        />
        <van-button type="primary" size="large" @click="submit(item,index)">提交</van-button>
      </van-collapse-item>
    </van-collapse>-->
    <van-button style="margin:0.5rem 0" type="primary" size="large" @click="search">修改</van-button>
  </div>
</template>
<script>
import {
  Toast,
  Dialog,
  Field,
  CellGroup,
  Button,
  Collapse,
  CollapseItem
} from 'vant';
export default {
  components: {
    'van-field': Field,
    'van-button': Button,
    'van-cell-group': CellGroup,
    'van-collapse': Collapse,
    'van-collapse-item': CollapseItem
  },
  data() {
    return {
      username: '',
      idCardNo: '',
      phone: '',
      telphone: [],
      list: [],
      activeNames: ['1']
    };
  },
  methods: {
    search() {
      if (this.username.length <= 0) {
        Toast('请输入正确的用户名');
      } else {
        Dialog.confirm({
          title: '提示',
          message: '确认修改吗?'
        }).then(() => {
          this.$http
            .post('upload/updateUserWhiteList', {
              username: this.username,
              idCardNo: this.idCardNo,
              telphone: this.phone
            })
            .then(res => {
              if (res.data.code === '0') {
                Toast('修改成功');
              } else {
                Toast(res.data.message);
              }
            });
        });
        // this.$http
        //   .post('upload/updateUserWhiteList', {
        //     username: this.username,
        //     idCardNo: this.idCardNo,
        //     telphone: this.phone
        //   })
        //   .then(res => {
        //     console.log(res);
        //     this.list = res.data.object;
        //     // this.hasSearch = true;
        //     // this.oldCoin = res.data.object;
        //   });
      }
    }
    // submit(data, index) {
    //   if (this.telphone[index].length !== 6) {
    //     Toast('请输入正确的手机号');
    //   } else {
    //     Dialog.confirm({
    //       title: '提示',
    //       message: '确认修改吗?'
    //     })
    //       .then(() => {
    //         this.$http
    //           .post('upload/updateUserWhiteList', {
    //             id: data.id + '',
    //             telphone: this.telphone[index]
    //           })
    //           .then(res => {
    //             if (res.data.code === '0') {
    //               Toast('添加成功');
    //               this.list = [];
    //               this.telphone = [];
    //               this.username = '';
    //               this.idCardNo = '';
    //             } else {
    //               Toast(res.data.message);
    //             }
    //           });
    //       })
    //       .catch();
    //   }
    // }
  }
};
</script>